<template>
  <div v-if="list.length">
    <template v-for="item in list">
      <div
        class="seckill-wrapper"
        v-if="item.hasOwnProperty('data') && item.data.hasOwnProperty('is_seckill') && item.data.hasOwnProperty('commodity') && item.data.commodity.length"
      >
        <div class="seckill-inner">
          <div class="seckill-top">
            <p class="title">秒杀专区</p>
          </div>
          <div class="seckill-content">
            <div class="seckill-duration">
              <span class="remain">{{ statusTimeTitle }}</span>
              <div class="time">
                <div class="hour">
                  <span v-if="hour >= 100">{{ bh }}</span>
                  <span>{{ sh }}</span>
                  <span>{{ gh }}</span>
                </div>
                <i>:</i>
                <div class="minute">
                  <span>{{ sm }}</span>
                  <span>{{ gm  }}</span>
                </div>
                <i>:</i>
                <div class="second">
                  <span>{{ ss }}</span>
                  <span>{{ gs }}</span>
                </div>
              </div>
            </div>
            <ul>
              <li v-for="(secItem, index) of item.data.commodity" :key="index" @click="toDetail(secItem)">
                <div class="left">
                  <img :src="secItem.img_show" alt />
                </div>
                <div class="right">
                  <p class="right-title">{{ secItem.name }}</p>
                  <p class="remain">仅剩{{ secItem.remain_kucun }}份</p>
                  <div class="progress">
                    <div
                      class="progress-inner"
                      :style="{width: secItem.remain_kucun / secItem.seckill_kucun}"
                    ></div>
                  </div>
                  <div class="price">
                    ￥
                    <i>{{ secItem.price }}</i>
                  </div>
                  <button
                    class="immediately"
										:class="{'active': disabledFunc(secItem)}"
                    :disabled="!disabledFunc(secItem)"
                  >马上抢</button>
                </div>
              </li>
            </ul>
          </div>
					
          <slot></slot>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      bh: '',
      sh: '',
      gh: '',
      sm: '',
      gm: '',
      ss: '',
      gs: '',
      hour: 0,
      timer: null,
      statusTimeTitle: '距结束还剩'
    }
  },
  watch: {
    list() {
      this.timer && clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.calculateTime()
      }, 1000)
    }
  },
  destroyed() {
    this.timer && clearInterval(this.timer)
  },
	methods: {
    toDetail(secItem) {
      this.$router.push({path: `/item-detail/${secItem.id}`, query: {isSeckill: 1} })
    },
		disabledFunc(item) {
			let timestamp = new Date().getTime() / 1000
			if (item.start_time > timestamp) {
				return false
			} else {
				return true
			}
    },
    calculateTime() {
      let hour, minute, second;
      let arr = [];
      this.list.forEach((item, index) => {
        if (item.data && item.data.commodity && item.data.is_seckill) {
          item.data.commodity.forEach((secItem, index) => {
            
            let remain_time = secItem.end_time - new Date().getTime() / 1000;
            let will_time = secItem.start_time - new Date().getTime() / 1000;
            if (will_time > 0 && remain_time > 0) {
              arr.push(will_time);
              this.statusTimeTitle = '距开始还剩'
            } else if (will_time <= 0 && remain_time > 0) {
              arr.push(remain_time);
            }
            
          });
        }
      });
      
      let minTime = Math.min.apply(this, arr);
      
      hour = Math.floor(minTime / 3600);
      minute = Math.floor((minTime % 3600) / 60);
      second = Math.floor((minTime % 3600) % 60);
      // return { hour, minute, second };
      this.hour = hour
      this.bh = hour >= 100 ? Math.floor(hour / 100) : 0
      this.sh = hour >= 100 ? Math.floor(hour / 10 % 10) : Math.floor(hour / 10) > 0 ? Math.floor(hour / 10) : 0
      this.gh = hour >= 100 ? Math.floor(hour % 100 % 10) : Math.floor(hour / 10) > 0 ? Math.floor(hour % 10) : Math.floor(hour)
      this.sm = minute >= 10 ? Math.floor(minute / 10)  : 0
      this.gm = minute >= 10 ? Math.floor(minute % 10) : Math.floor(minute)
      this.ss = second >= 10 ? Math.floor(second / 10) : 0
      this.gs = second >= 10 ? Math.floor(second % 10) : Math.floor(second)
      this.bh > 0 ? this.bh : 0
      this.sh > 0 ? this.sh : 0
      this.gh > 0 ? this.gh : 0
      this.sm > 0 ? this.sm : 0
      this.gm > 0 ? this.gm : 0
      this.ss > 0 ? this.ss : 0
      this.gs > 0 ? this.gs : 0
    }
	}
};
</script>
<style lang="less" scoped>

.seckill-wrapper {
  width: 100%;
  padding: 0 0.48rem;
  box-sizing: border-box;
	margin-top: 0.3rem;
  .seckill-inner {
    border-radius: 0.3rem;
    background: rgba(255, 255, 255, 1);
    padding: 0.68rem 0.42rem;
    .seckill-top {
      .title {
        line-height: 0.8rem;
        font-size: 0.68rem;
        font-family: PingFang;
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        text-align: center;
      }
    }
    .seckill-content {
      margin-top: 0.36rem;
      .seckill-duration {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0.46rem;
        line-height: 0.6rem;
        .remain {
          line-height: 0.6rem;
          font-size: 0.44rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
          margin-right: 0.3rem;
        }
        .time {
          display: flex;
          align-items: center;
          .hour,
          .minute,
          .second {
            span {
              display: inline-block;
              width: 0.6rem;
              background: rgba(244, 67, 73, 1);
              border-radius: 0.1rem;
              font-size: 0.44rem;
              line-height: 0.6rem;
              text-align: center;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
              vertical-align: bottom;
              margin-right: 0.1rem;
            }
          }
          i {
            display: inline-block;
            font-size: 0.52rem;
            width: 0.3rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(244, 67, 73, 1);
            line-height: 0.6rem;
            text-align: center;
            margin-right: 0.1rem;
          }
        }
      }
      ul {
        margin-top: 0.86rem;
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 2.8rem;
          margin-bottom: 0.75rem;
          .left {
            width: 2.8rem;
            height: 2.8rem;
            border-radius: 0.1rem;
            overflow: hidden;
            border: 1px solid #eee;
            margin-right: 0.45rem;
            img {
              width: 100%;
              vertical-align: bottom;
            }
          }
          .right {
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            .right-title {
              width: 9rem;
              font-size: 0.6rem;
              font-family: PingFang;
              font-weight: bold;
              color: rgba(68, 68, 68, 1);
              line-height: 0.76rem;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .remain {
              height: 0.42rem;
              font-size: 0.44rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(244, 67, 73, 1);
              line-height: 0.64rem;
            }
            .progress {
              width: 4.86rem;
              height: 0.24rem;
              background: rgba(247, 247, 247, 1);
              border: 0px solid rgba(238, 238, 238, 1);
              border-radius: 0.12rem;
              overflow: hidden;
              .progress-inner {
                background: rgba(244, 67, 73, 1);
                height: 100%;
              }
            }
            .price {
              font-size: 0.44rem;
              font-family: PingFang;
              font-weight: bold;
              color: rgba(234, 50, 37, 1);
              line-height: 0.64rem;
              i {
                font-size: 0.64rem;
                font-family: PingFang;
                font-weight: bold;
                color: rgba(234, 50, 37, 1);
                line-height: 0.64rem;
              }
            }
            .immediately {
              width: 2.08rem;
							// background: rgba(244, 67, 73, 1);
							background: #ccc;
              border-radius: 0.05rem;
              font-size: 0.44rem;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(255, 254, 254, 1);
              line-height: 0.88rem;
              text-align: center;
              position: absolute;
              right: 0;
              bottom: 0;
              border: none;
							outline: none;
							&.active{
								background: rgba(244, 67, 73, 1);
							}
            }
          }
        }
      }
    }
    .seckill-more {
      font-size: 0.48rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(147, 147, 147, 1);
      line-height: 0.64rem;
      width: 2.5rem;
      margin: 0 auto;
      i {
        vertical-align: top;
      }
    }
  }
}
</style>